<template>
  <div>
    <el-dialog
      title="修改密码"
      :visible.sync="Visible"
      width="40%"
      append-to-body
      :close-on-click-modal="false"
      @close="cancel"
    >
      <div class="midContant clearfix">
        
        <span style="text-align: right" class="Span borderR borderB">原密码:</span>
        <span class="Span  borderB  contant">
          <el-input
            ref="old_password"
            @blur="handleBlur('old_password',$event)"
            @focus="handleFocus($event)"
            class="Required"
            placeholder="请输入原密码"
            v-model="data.old_password"
          ></el-input>
        </span>
        <span style="text-align: right" class="Span borderR borderB">新密码:</span>
        <span class="Span  borderB contant">
          <el-input
          style="-webkit-text-security:disc"
            ref="password"
            @blur="handleBlur('password',$event)"
            @focus="handleFocus($event)"
            class="Required"
            placeholder="请输入新密码"
            v-model="data.password"
          ></el-input>
        </span>
        <span style="text-align: right" class="Span borderR ">确认密码:</span>
        <span class="Span contant">
          <el-input
          style="-webkit-text-security:disc"
            ref="confirm_password"
            @blur="handleBlur('confirm_password',$event)"
            @focus="handleFocus($event)"
            class="Required"
            placeholder="请输入确认密码"
            v-model="data.confirm_password"
          ></el-input>
        </span>        
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirm" size="small"
          >确 定</el-button
        >
        <el-button @click="cancel" size="small">取 消</el-button>
      </span>
      
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
  },
  components: { },
  data() {
    return {
      Visible: false,
      data: {
        old_password:"",
        password:"",
        confirm_password:"",
      },
      confirmTrue:true,//确定按钮保护
    };
  },
  created() {
  },
  mounted() {},
  watch: {},
  methods: {
    init(data) {
      this.Visible = true;
    },
    // 提交修改
    confirm() {
      //是否有空值必选项标识
      let type=true 
      //输入框判断是否有值
      if(!this.data.old_password){
        this.$refs.old_password.$el.childNodes[1].style.border='1px solid red'
        type=false
      }
      if(!this.data.password){
        this.$refs.password.$el.childNodes[1].style.border='1px solid red'
        type=false
      }
      if(!this.data.confirm_password){
        this.$refs.confirm_password.$el.childNodes[1].style.border='1px solid red'
        type=false
      }
      if(type&&this.confirmTrue){
        this.confirmTrue=false
        window.setTimeout(()=>{
          this.confirmTrue=true
        },1000)
        let params = new FormData();
        params.append("old_password", this.data.old_password);
        params.append("password", this.data.password);
        params.append("confirm_password", this.data.confirm_password);
        this.$postForm("adminupdatepassword", params).then((res) => {
          if(res.success){
            this.cancel()
            this.$router.push({ path:"/Login" });
            let langObj=JSON.parse(localStorage.getItem('language'))
            localStorage.clear();
            localStorage.setItem('language',JSON.stringify(langObj))
            this.$message.success(res.msg);
          }
          this.confirmTrue=true
        });
      }
    },
    //取消修改
    cancel(){
      this.data= {
        old_password:"",
        password:"",
        confirm_password:"",

      }
      this.Visible = false;
      let dom=document.getElementsByClassName('el-input__inner')
      for(let i=0;i<dom.length;i++){
        dom[i].style.border='1px solid #E0E3E9'
      }
    },
    //输入框、下拉框失去焦点边框变色
    handleBlur(name,event){ 
      if(this.data[name] == ''){
        event.target.style.border='1px solid red'
      }
      if(name=='password'||name=='confirm_password'){
        if(this.data.password!=this.data.confirm_password){
          this.$refs.password.$el.childNodes[1].style.border='1px solid red'
          this.$refs.confirm_password.$el.childNodes[1].style.border='1px solid red'
        }
        if(this.data.password != ''&&this.data.confirm_password != ''&&this.data.password==this.data.confirm_password){
          this.$refs.password.$el.childNodes[1].style.border='1px solid #E0E3E9'
          this.$refs.confirm_password.$el.childNodes[1].style.border='1px solid #E0E3E9'
        }
      }
    },
    //输入框、下拉框获取焦点边框变色
    handleFocus(event){ 
      event.target.style.border='1px solid #E0E3E9'
    },
  },
};
</script>

<style scoped lang="less" >
.midContant {
  .Span {
    width: 50%;
  }
}
</style>